<template>
  <div>
    <!-- <main class="container" style="margin-bottom: 0rem" v-if="isClickAgreetment">
      <div class="tip">
        <div class="return el-icon-arrow-left" @click="$router.go(-1)"></div>
        <div class="title">邀请您注册</div>
        <div class="more el-icon-more"></div>
      </div>
      <div v-html="currentContent" style="padding: 0rem .9333rem"></div>
    </main> -->

    <main class="container">
      <div class="tip">
        <div class="return el-icon-arrow-left" @click="$router.go(-1)"></div>
        <div class="title">邀请您注册</div>
        <div class="more el-icon-more"></div>
      </div>
      <div class="login-box">
        <div class="login">
          <img src="./assets/images/logo_img@3x.png" alt="" />
        </div>
        <div class="login-tip">{{nickName}} 邀请您注册</div>
        <div class="login-titile">问三师</div>
      </div>
      <div class="input-box">
        <div class="input-item">
          <input
            class="name"
            v-model="getCodeObj.name"
            placeholder="请填写您的真实姓名"
            type="text"
          />
        </div>
        <div class="input-item">
          <input
            type="text"
            v-model="getCodeObj.phone"
            placeholder="请填写您的手机号"
            class="phone"
          />
        </div>
        <div class="input-item haveVerify">
          <input type="text" v-model="getCodeObj.code" placeholder="请填写验证码"/>
          <span
            class="verify"
            @click="obtainVerifyCode"
            :style="{
              color: verifyContent.disabled ? 'grey' : '#f87a23',
              cursor: verifyContent.disabled ? 'unset' : 'pointer',
            }"
          >
            {{ verifyContent.disabled ? verifyContent.text : "获取验证码" }}
          </span>
          <!-- <span class="verify" @click="getcode">获取验证码</span> -->
        </div>
        <div class="registerBtn" @click="registerFn"><span>立即注册</span></div>
      </div>
      <div class="agreement">
        点击立即注册代表您已阅读
        <span
          class="serve"
          style="color: #f77a23"
          @click="getAgreementFn('serve')"
        >
          《用户协议》
        </span>
        和
        <span
          class="privacy"
          style="color: #f77a23"
          @click="getAgreementFn('privacy')"
        >
          《隐私协议》
        </span>
      </div>
    </main>
  </div>
</template>

<script>
import { getRequest } from "@/wss/utils/wss.js";
import {
  getInvitedGetCodeApi,
  getInvitedQrcodeRegisterApi,
} from "@/BMViews/api/InvitedUsers.js";
import { debounce } from "@/wss/utils/wss.js";
import Agreement from "@/BMViews/invite/agreement.vue";
export default {
  components: { Agreement },
  data() {
    return {
      nickName:'',//商务名字
      // 获取验证码按钮
      verifyContent: {
        disabled: false,
        text: "获取验证码",
        time: 60,
      },
      //   用户的手机号
      getCodeObj: {
        phone: "",
        name,
        code: "",
      },
      test: true,
      isClickAgreetment: false,
      // 当前内容的协议
      agreementContent: "",
    };
  },
  mounted() {
    // 路由传参
    if (this.$route.query.nickName) {
      let nickName = this.$route.query.nickName;
      this.nickName = nickName
    }
  },
  methods: {
    getAgreementFn(type) {
      this.$router.push({
        path: "/wssagreement",
        query: {
          type,
        },
      });
    },

    // 注册
    async registerFn() {
      let { placeId, cmId, organizationId  } = this.$store.state.user.userInfo;
      const getCodeObj = this.getCodeObj;
      console.log(getRequest("cmId"), getRequest("organizationId"));
      // 收集注册需要的参数
      const Params = {
        name: getCodeObj.name,
        mobile: getCodeObj.phone,
        cmid: getRequest("cmId")=='null' ? '' : getRequest("cmId"),
        organizationId: getRequest("organizationId")=='null' ? '' : getRequest("organizationId"),
        placeId: getRequest("placeId")=='null' ? '' : getRequest("placeId"),
        code: getCodeObj.code,
      };

      let { code, msg } = await getInvitedQrcodeRegisterApi(Params);
      if (code != 200) return;
      this.$message({
        message: msg,
        type: "success",
      });
      if(msg == '您已注册过，无需重复注册') return
      // 跳转到注册完成页面
      this.$router.push({
        path: "registerSucceed",
        query: {
          phone: getCodeObj.phone,
        },
      });
    },

    // 发送验证码
    async obtainVerifyCode() {
      // 防抖
      debounce(async () => {
        var self = this;
        if (self.verifyContent.disabled) {
          return;
        }
        if (self.validePhone()) {
          // 发送短信接口请求
          let { code, msg } = await getInvitedGetCodeApi(this.getCodeObj);

          if (code != 200) return;
          this.$message({
            type: "success",
            message: "已发送",
          });
          self.countDown();
        }
      }, 500)();
    },

    // 验证手机号
    validePhone() {
      if (["", null, undefined].includes(this.getCodeObj.phone)) {
        this.$message({
          type: "warning",
          message: "请输入手机号",
        });
        return false;
      } else if (!/^1[3456789]\d{9}$/.test(this.getCodeObj.phone)) {
        this.$message({
          type: "warning",
          message: "请输入正确的手机号码",
        });
        return false;
      } else {
        return true;
      }
    },

    // 倒计时方法
    countDown() {
      var time = 60;
      var timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.verifyContent.disabled = false;
          this.verifyContent.text = "获取验证码";
        } else {
          this.verifyContent.disabled = true;
          this.verifyContent.text = `重新获取(${time}s)`;
          time--;
          // this.verifyContent.time--;
        }
      }, 1000);
    },
  },
};
</script>
<style>
body{
  zoom: 1!important;
}
</style>
<style scoped lang="scss">
main.container {
  position: relative;
  background: url("./assets/images/dt_img.png") center no-repeat;
  background-size: cover;
  min-height: 100vh;
  div.tip {
    padding: 0.5333rem 0.8rem 0rem;
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-family: PingFang SC;
    font-weight: 600;
    color: #333333;
    margin-bottom: 2.3733rem;
    display: none;
    div{
      min-width: 16px;
    }
    div.return {
    }

    div.title {
    }

    div.more {
    }
  }

  div.login-box {
    text-align: center;
    margin: 0 auto;
    padding-top: 2.3733rem;
    div.login {
      img {
        width: 3.2rem;
        height: 3.2rem;
        margin-bottom: 1.7333rem;
      }
    }

    div.login-tip {
      font-size: 0.7467rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
    }

    div.login-titile {
      margin-top: 1.3067rem;
      font-size: 1.2267rem;
      font-family: PingFang SC;
      font-weight: 600;
      color: #333333;
    }
  }

  div.input-box {
    margin-top: 2.24rem;
    text-align: center;
    div.input-item {
      margin-top: 1.0667rem;
      input {
        padding-left: 0.8rem;
        width: 17.3333rem;
        font-size: 0.8rem;
        font-family: PingFang SC;
        font-weight: 400;
        display: inline-block;
        height: 2.5rem;
        background: #ffffff;
        border: 0.0267rem solid #cccccc;
        border-radius: 1.2rem;
        &::-webkit-input-placeholder{
          color: #ccc;
        }
      }
      input {

      }
    }

    div.input-item.haveVerify {
      border: 0.0267rem solid #cccccc;
      height: 2.4rem;
      background: #ffffff;
      border: 0.0267rem solid #cccccc;
      border-radius: 1.2rem;
      display: flex;
      width: 17.3333rem;
      margin: 1.0667rem auto;
      align-items: center;
      input {
        flex: 1;
        height: 2.2133rem;

        border: unset;
      }

      span.verify {
        flex: 0.5;
        height: 0.8rem;
        text-align: center;
        line-height: 0.8rem;
        font-size: 0.8rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #f77a23;
        border-left: #cccccc solid 0.0267rem;
      }
    }
  }
  .registerBtn {
    margin: 1.0667rem auto;

    line-height: 2.4rem;
    width: 17.3333rem;
    height: 2.4rem;
    font-size: 0.8533rem;
    font-family: PingFang SC;
    font-weight: 600;
    color: #ffffff;
    background: #f77a23;
    border-radius: 1.2rem;
    width: 17.3333rem;
    height: 2.4rem;
    background: #f77a23;
    border-radius: 1.2rem;
  }
  div.agreement {
    font-size: 0.5867rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #999999;
    left: 50%;
    width: 100%;
    text-align: center;
    transform: translate(-50%);
    position: absolute;
    bottom: 0.5333rem;
    span.serve {
      cursor: pointer;
    }

    span.privacy {
      cursor: pointer;
    }
  }
}
input:focus-visible {
  outline-offset: unset;
}
:focus-visible {
  outline: unset;
}
</style>